<template>
  <div :class="['root', kb]" v-if="data">
    <div class="title">
      {{ title }}
    </div>
    <div class="count">
      {{ data.total }}
    </div>
    <div class="time-p">
      <div class="item">
        日<i :class="data.time.day.substr(0,1) === '-' ? down : up"
      ></i>{{ data.time.day.substr(0, 1) === '-' ? data.time.day.substr(1) : data.time.day }}
      </div>
      <div class="item">
        周<i :class="data.time.week.substr(0,1) === '-' ? down : up"></i
      >{{ data.time.week.substr(0, 1) === '-' ? data.time.week.substr(1) : data.time.week }}
      </div>
      <div class="item">
        月<i :class="data.time.month.substr(0,1) === '-' ? down : up"></i
      >{{ data.time.month.substr(0, 1) === '-' ? data.time.month.substr(1) : data.time.month }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Scoreboard',
  components: {},
  props: {
    kb: {
      type: String
    },
    title: {
      type: String,
      require: true
    },
    data: {
      type: Object,
      require: true,
      default: () => {
        return {
          total: 0,
          time: {
            day: '0%',
            week: '0%',
            month: '0%'
          }
        }
      }
    }
  },
  data() {
    return {
      up: 'font_family icon-ss1 red',
      down: 'font_family icon-xj1 green'
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.root {
  height: 180px;
  width: 15.4%;
  background-color: #2f88fe;
  background-size: contain;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgb(191 191 191 / 75%);

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgb(191 191 191 / 75%);
    transition: all 0.3s;
  }

  .title {
    display: inline-block;
    height: 40px;
    padding: 0 18px;
    background-color: #1552ff;
    border-radius: 10px 0;
    line-height: 40px;
    font-size: 18px;
    color: #ffffff;
  }

  .count {
    padding: 20px 18px;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
  }

  .time-p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 24px;
    padding: 0 18px 24px 18px;
    color: #ffffff;

    .item {
      font-size: 16px;
      min-width: 90px;
    }

    .red {
      padding: 0 6px;
      color: #ff5855;
    }

    .green {
      padding: 0 6px;
      color: #55fd47;
    }
  }

  &.kb1 {
    background-image: url("~@/assets/images/kb1.png");
  }

  &.kb2 {
    background-image: url("~@/assets/images/kb2.png");
  }

  &.kb3 {
    background-image: url("~@/assets/images/kb3.png");
  }

  &.kb4 {
    background-image: url("~@/assets/images/kb4.png");
  }

  &.kb5 {
    background-image: url("~@/assets/images/kb5.png");
  }

  &.kb6 {
    background-image: url("~@/assets/images/kb6.png");
  }
}
</style>
